<template>
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<view class="Launchpage" v-if="Launchpage">
			<image src="/static/imgs/qidongye_slices/1.png" mode=""></image>
		</view>
		<view class="content">
			<view class="">
				<!-- <uni-nav-bar left-icon="back" title="账号登录" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack"></uni-nav-bar> -->
				
                <view class="loginCover">
                    <view class="logoCenter">
                        <image src="/static/images/newestIcon/1024logo2.png" mode="" class="logoImg"></image>
                    </view>
                </view>
				<view class="bg_FFFFFF formBox">
					<view class="cu-form-group flex">
						<view class="title text-black">
							<image src="/static/imgs/login_slices/phone.png" mode="widthFix" style="width: 40rpx"></image>
						</view>
						<input placeholder="请输入你的手机号码" name="input" v-model="login.phone" class="text-black"></input>
						<view @tap="login.phone = ''">
							<image src="/static/images/icon/clear.png" mode="widthFix" v-if="login.phone.length" style="width: 36rpx;"></image>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title text-black">
							<image src="/static/imgs/login_slices/password.png" mode="widthFix" style="width: 40rpx"></image>
						</view>
						<input placeholder="请输入你的密码" type="password" name="input" v-model="login.password" v-if="showPwd"></input>
						<input placeholder="请输入你的密码" name="input" v-model="login.password" v-else></input>
						<view @tap="handleLookPwd">
							<image src="/static/shilu-login/cl.png" mode="" v-if="showPwd"></image>
							<image src="/static/images/icon/openpwd.png" mode="" v-else></image>
						</view>
					</view>
				</view>

				<view class="padding-lr">
					<view class="login spacing_bot31 zc bg-red" @tap="defaultHandlerLogin">
						<text>{{ login.loading ? "登录中...":"登 录"}}</text>
					</view>
					<view class="sp_be tex1 text-white">
						<view class="">
							<navigator url="./beforeRegister" class="flex" style="color: #999999;"><view style="color: #CFCFCF;">没有账号？</view>立即注册</navigator>
						</view>
						<view class="">
							<navigator url="./forgetpwd" class="text-black" style="color: #999999;">忘记密码？</navigator>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import md5 from "@/common/md5"
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				Launchpage: false,
				// new
				login: {
					loading: false,
					phone: "",
					password: ""
				},
				isKeep: false,
				showPwd: true,
			};
		},
		components: {},
		mounted() {
			let _this = this
			setTimeout(function() {
				_this.Launchpage = false
			}, 2000);
		},
		methods: {
			//返回上一页
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//点击切换密码框状态
			handleLookPwd: function() {
				this.showPwd = !this.showPwd
			},


			// 检测是否登录了
			checkLogin: function() {
				this.$Request.post(this.$api.index.checkLogin).then(res => {
					if (res.code == 0) {
						uni.switchTab({
							url: '/pages/index/index',
						});
					}
				})
			},
			defaultHandlerLogin: function() {
				// 用户名
				if (!this.login.phone) {
					uni.showToast({
						icon: "none",
						title: "请输入账号！",
						duration: 3000
					});
					return;
				}
				if (!this.login.password) {
					uni.showToast({
						icon: "none",
						title: "请输入密码！",
						duration: 3000
					});
					return;
				}

				this.login.loading = true;
				var time = Date.parse(new Date());
				var token = md5(this.login.phone + this.login.password + time);

				this.$Request.post(this.$api.index.login, {
					name: this.login.phone,
					pwd: this.login.password,
					token: token,
					time: time,
				}).then(res => {
					this.login.loading = false;
					if (res.code == 2) {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 5000
						});
					} else {
						this.$SysCache.put("Authorization_token", token);
						this.$SysCache.put("keep_phone", this.login.phone);
						this.$SysCache.put("keep_phone_flag", 1);
						this.$SysCache.put("iskeep", this.isKeep);

						if (this.isKeep) {
							this.$SysCache.put("keep_password", this.login.password);
						}
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 1000
						});
						if (res.code == 0) {
							uni.reLaunch({
								url: '/pages/index/index',
							});
						}
					}
				})
			},
			BindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				this.login[dataval] = e.detail.value;
			},
			toRegister: function() {
				uni.navigateTo({
					url: '/pages/member/questionnaire',
				});
			},
			onLoad: function() {
				const keepPhone = this.$SysCache.get("keep_phone");

				if (keepPhone) {
					this.login.phone = keepPhone;
				}
				const keep = this.$SysCache.get("iskeep");
				if (keep) {
					this.isKeep = keep;
				}
				const keepPassword = this.$SysCache.get("keep_password");
				if (keepPassword) {
					this.login.password = keepPassword;
				}
			},
			checkboxChange: function(e) {
				this.isKeep = !this.isKeep;
			},
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toRegister: function() {
				uni.navigateTo({
					url: "/pages/public/login/register"
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
	.ceiling{
		background-color: #EE515A;
	}
    
</style>
<style lang="scss" scoped>
    .loginCover{
        width: 100%;
        height: 588rpx;
        background: url(../../../static/imgs/login_slices/cover.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .logoCenter{
            width: 164rpx;
            height: 164rpx;
            background: #FFFFFF;
            box-shadow: 0px 2rpx 21rpx 0px rgba(251, 94, 88, 0.41);
            border-radius: 20rpx;
            position: absolute;
            bottom: -70rpx;
            left: 38%;
            padding: 10rpx;
            .logoImg{
                width: 100%;
                height: 100%;
            }
        }
    }
	.bg-red{
		background-color: #F24957;
	}
	//激活样式类名 active
	.formBox{
        margin-top: 100rpx;
		padding: 68rpx;
		.active{
			border-bottom: 1px solid #F24957;
		}
	}
	.cu-form-group + .cu-form-group{
		border-top: 0;
		margin-top: 40rpx;
	}
	.cu-form-group{
		background-color: #FFFFFF;
		padding: 24rpx 0;
		border-bottom: 1px solid #DDDDDD;
	}
	.cu-form-group uni-input{
		color: #333333;
	}
	.Launchpage {
		image {
			width: 258rpx;
			height: 89rpx;
			position: absolute;
			bottom: 73rpx;
			left: 241rpx;
			right: 251rpx;
		}
	}
	.cu-form-group{
		background-color: #FFFFFF;
	}
	.cu-form-group .title{
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.padding-lr{
		padding-left: 70rpx;
		padding-right: 70rpx;
	}
	.content {
		// background-color: #FF5A5F;
		height: 100vh;

		image {
			width: 38rpx;
			height: 38rpx;
		}

		.tozc {
			width: 100%;
			display: flex;
			flex-flow: row-reverse nowrap;
			align-items: center;
			line-height: 30rpx;

		}

		.input11 {
			width: 100%;
			height: 100%;
			border-bottom: 1rpx solid #EFEFEF;

			input {
				height: 100rpx;
				flex: 75%;
				background-color: transparent !important;
				border: none;
				outline: none;
				padding-left: 20rpx;
			}


		}

		.login {
			width: 100%;
			opacity: 0.8;
			border-radius: 8rpx;
			text-align: center;
			text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 92rpx;
				color: #FFFFFF;
				opacity: 0.5;

			}
		}

		.zc {
			opacity: 1;

			text {
				opacity: 1;
			}
		}

		.tex1 {
			// overflow: hidden;
			height: 38rpx;
			vertical-align: baseline;
			align-items: center;

			image {
				position: relative;
				top: 10rpx;
			}

			view,
			text {

				// line-height: -1rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.shengm {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			display: flex;
			justify-content: center;
			color: #666666;

			view {
				color: #333333;
			}

		}

		.bottom_text {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-flow: row nowrap;
			align-items: center;
			position: fixed;
			text-align: center;
			bottom: 76rpx;
			left: 0;
			right: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			view {
				color: #333333;
			}

		}

		// :active
	}
</style>
